<template>
	<!-- movable-area与movable-view需要分别增加pointer-events: none和pointer-events: auto
	用于组件事件穿透与恢复组件事件（此处不加会导致引用该组件的父组件无法使用事件） -->
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all">
				<view class="movablebox" @click="movableClick" :class="[isShow==false?'movableboxWidth':'movableboxWidthClose']">
					<view class="content" style="display: flex;margin-left: 150rpx;">
					
					</view>
					<view class="button" style="">
						对账
					</view>
					<view class="" style="color: red;display: flex;">
							<view class="">
								<text>批量制作对账单</text>
							</view>
							<view class="">
								<text>批量催款</text>
							</view>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:false,
				width:520,
				x: 20, //x坐标
				y: 520, //y坐标
			}
		},
		methods: {
			movableClick() {
				this.isShow=!this.isShow
				this.$emit('movableClick')
			}
		}
	}
</script>

<style lang="scss">
	$all_width: 96rpx;
	$all_height: 96rpx;

	.movable-area {

		// 兼容H5和APP
		/* #ifdef H5 */
		height: calc(100vh - 140px);
		margin-top: 100rpx;
		/* #endif */
		/* #ifdef APP */
		margin-top: 80rpx;
		height: calc(100vh - 40px);
		/* #endif */
		width: 99%;
		top: 0;
		position: fixed;
		// z-index: 9999;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			padding-right: 480rpx;
			padding-bottom: 80rpx;
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件

			image {
				width: $all_width;
				height: $all_height;
			}
			.movablebox.movableboxWidthClose{
				width: 120rpx;
				animation: width 1s linear 1 alternate;
			}
			@keyframes width {
			  from {
			    width: 550rpx;
			  }
			  to {
			    width: 120rpx;
			  }
			}
			
			.movablebox.movableboxWidth{
				width: 120rpx;
				animation: fadenum  1s linear 1 forwards;
			}
			@keyframes fadenum {
			  from {
			    width: 0rpx;
			  }
			  to {
			    width: 550rpx;
			  }
			}
			.movablebox {
				
				display: flex;
				align-items: flex-end;
				.content{
					background-color: green;
					position: absolute;
				}
				.button{
					position: absolute;
					 background-color: #2174FF;
					 height: 120rpx;
					 width:120rpx;
					 display: flex;
					 justify-content: center;
					 align-items: center;
					 border-radius: 50%;
					 // float: right;
				}
				border: 1px solid red;
				border-top-left-radius: 65rpx;
				border-bottom-left-radius: 65rpx;
				border-top-right-radius: 65rpx;
				border-bottom-right-radius: 65rpx;
				//
				color: #fff;
				// border-radius: 50%;
				height: 120rpx;
				// padding: 20rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}
		}
	}
</style>